<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">客户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>会员优惠券</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入优惠券名称" v-model="query">
            <el-button slot="append" @click="serch" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-plus" circle @click="addCoupon"></el-button>
          <el-button type="info" icon="el-icon-refresh" circle @click="refresh"></el-button>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table :key="Math.random()"
                :data="tableData"
                border
                style="width: 100%" >
        <el-table-column
            fixed
            align="center"
            prop="id"
            label="Id"
        >
        </el-table-column>
        <el-table-column
            fixed
            align="center"
            prop="shopName"
            label="使用门店"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="优惠券名称"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="type"
            label="优惠券类型"
            width="100"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.type==0">全场赠券</p>
            <p v-else-if="scope.row.type==1" >会员赠券</p>
            <p v-else-if="scope.row.type==2" >消费赠券</p>
            <p v-else="scope.row.type==3">注册赠券</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="platform"
            label="使用平台"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.platform==0">全部</p>
            <p v-else-if="scope.row.platform==1" label="1">移动</p>
            <p v-else="scope.row.platform==2" label="1">PC</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="count"
            label="数量"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="amount"
            label="金额"
        >
        </el-table-column>
        <el-table-column width="120"
                         prop="perLimit"
                         label="每人限领"
                         align="center">
        </el-table-column>
        <el-table-column width="100"
                         align="center"
                         prop="minPoint"
                         label="使用门槛"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.minPoint==0">无门槛</p>
            <p type="danger" v-else>有门槛</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="startTime"
            label="开始时间"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="endTime"
            label="结束时间"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="publishCount"
            label="发行数量"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="receiveCount"
            label="已领取数量"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="useCount"
            label="已使用数量"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="enableTime"
            label="可领取时间"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="code"
            label="优惠码"
        >
        </el-table-column>
        <el-table-column
            align="center"
            prop="memberLevel"
            label="领取会员类型"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.memberLevel==0">普通会员</p>
            <p type="danger" v-else>黄金以上会员</p>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="note"
            label="备注"
        >
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  size="medium" circle @click="editCoupon(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete"  size="medium" circle @click="deleteCoupon(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <!--修改等级信息弹出框-->
      <div>
        <el-dialog
            title="提示"
            :visible.sync="EditDialogVisible"
            width="50%"
            @close="closAll"
        >
          <el-form :model="EditFormData" status-icon :rules="EditFormRules" ref="EditRuleForm" label-width="100px">

            <el-form-item label="选择门店" prop="shopId">
              <el-select v-model="EditFormData.shopId" placeholder="请选择门店">
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.shopName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="优惠券名称" prop="name">
              <el-input type="text" v-model="EditFormData.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="优惠券类型" prop="type">
              <template>
                <el-radio v-model="EditFormData.type" :label="0">全场赠券</el-radio>
                <el-radio v-model="EditFormData.type" :label="1">会员赠券</el-radio>
                <el-radio v-model="EditFormData.type" :label="2">消费赠券</el-radio>
                <el-radio v-model="EditFormData.type" :label="3">注册赠券</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="使用平台" prop="platform">
              <template>
                <el-radio v-model="EditFormData.platform" :label="0">全部平台</el-radio>
                <el-radio v-model="EditFormData.platform" :label="1">移动平台</el-radio>
                <el-radio v-model="EditFormData.platform" :label="2">PC平台</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input type="text" v-model.number="EditFormData.count" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="金额" prop="amount">
              <el-input type="text" v-model="EditFormData.amount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="每人限领张数" prop="perLimit">
              <el-input type="text" v-model.number="EditFormData.perLimit" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                  v-model="EditFormData.startTime"
                  type="datetime"
                  placeholder="选择开始日期"
                  :picker-options="updateTime"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                  v-model="EditFormData.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  :picker-options="actStartTime"
              >
              </el-date-picker>
            </el-form-item>



            <el-form-item label="使用门槛" prop="minPoint">
              <template>
                <el-radio v-model="EditFormData.minPoint" :label="1">有门槛</el-radio>
                <el-radio v-model="EditFormData.minPoint" :label="0">无门槛</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="使用类型" prop="useType">
              <template>
                <el-radio v-model="EditFormData.useType" :label="0">全场通用</el-radio>
                <el-radio v-model="EditFormData.useType" :label="1">指定分类</el-radio>
                <el-radio v-model="EditFormData.useType" :label="2">指定车辆</el-radio>
              </template>
            </el-form-item>
            <el-form-item label="发行数量" prop="publishCount">
              <el-input type="text" v-model.number="EditFormData.publishCount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="优惠码" prop="code">
              <el-input type="text" v-model.number="EditFormData.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
              <el-input type="text" v-model="EditFormData.note" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可领取的会员类型" prop="memberLevel">
              <template>
                <el-radio v-model="EditFormData.memberLevel" :label="0">都可领取</el-radio>
                <el-radio v-model="EditFormData.memberLevel" :label="1">黄金以上</el-radio>
              </template>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary"  @click="confirmEditCoupon">确定</el-button>
          <el-button @click="EditDialogVisible = false">取消</el-button>
        </span>
        </el-dialog>
      </div>

    </el-card>
  </div>
</template>

<script>
export default {
  name: "coupon",
  data() {
    return {
      //时间校验
      updateTime: { // 开始日期小于结束日期
        disabledDate: time => {
          let endDateVal = this.EditFormData.endTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      actStartTime: { // 结束日期
        disabledDate: time => {
          let beginDateVal = this.EditFormData.startTime
          if (beginDateVal) {
            return (
                time.getTime() <
                new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000+1
            )
          }
        }
      },
      //查询条件
      query:"",
      //当前页码
      currentPage: 1,
      //每页显示记录
      pageSize:5,
      //总条数
      total:0,
      //当前的记录数据
      tableData: [],
      //是否打开修改弹框 true 打开 false 关闭
      EditDialogVisible: false,
      //修改弹框表单的数据
      EditFormData:{},
      //下拉框
      options: [],
      //修改弹框 表单的 规则
      EditFormRules:{
        name:[
          {required:true,message:"优惠券名称不能为空",trigger:"blur"}
        ],
        count:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        amount:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          { pattern: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
            message: '必须为正数',
            trigger: 'blur'}
        ],
        perLimit:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        publishCount:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        code:[
          { required: true, message: '请输入数字', trigger: 'blur' },
          {pattern: /(^[1-9]\d*$)/, message: '必须为正整数', trigger: 'blur'}
        ],
        note:[
          {required:true,message:"备注不能为空",trigger:"blur"}
        ],
      },
    }
  },
  created() {
    //页面加载自动执行
    this.initTableCoupon(this.currentPage,this.pageSize);
    //下拉框赋值
    this.xialakuang();
  },
  methods: {
    //给表单赋值，显示数据
    initTableCoupon(currentPage,pageSize){
      var that=this;
      this.$http.post(`/customer/coupon/findCouponByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (resp) {
        if (resp.data.code===200){
          that.tableData=resp.data.data.records;
          that.total=resp.data.data.total;
        }else {
          that.$message.error(resp.data.msg);
        }
      })
    },
    //修改每页几条的方法
    handleSizeChange(val) {
      this.pageSize=val;
      this.initTableCoupon(this.currentPage,this.pageSize);
    },
    //修改页数的方法
    handleCurrentChange(val) {
      this.currentPage=val;
      this.initTableCoupon(this.currentPage,this.pageSize);
    },
    //模糊查询按钮的方法
    serch(){
      this.currentPage=1,
      this.pageSize=5,
      this.initTableCoupon(this.currentPage,this.pageSize);
    },
    //修改弹框回显的方法
    editCoupon(row){
      this.EditFormData=row;
      this.EditDialogVisible=true;
    },
    //表单清空
    closAll(){
      this.$refs.EditRuleForm.resetFields();
    },
    //刷新局部页面
    refresh (){
      this.query='';
      this.initTableCoupon(1,this.pageSize);
    },
    //添加
    addCoupon(){
      this.EditFormData={},
      this.EditDialogVisible=true;

    },
    //下拉框赋值
    xialakuang(){
      var that = this;
      this.$http.get(`/hire/shop/getAllShop`).then(function (resp) {
        that.options=resp.data.data;

      })
    },
    //确认和修改会员优惠券
    confirmEditCoupon(){
       var that=this;
      this.$refs['EditRuleForm'].validate((valid)=>{
        //console.log(this.EditFormData)
        if (valid){
          this.$http.put("/customer/coupon/updateCoupon",this.EditFormData).then(function (resp) {
            if (resp.data.code===200){
              that.$message.success(resp.data.msg);
              that.EditDialogVisible=false;
              that.initTableCoupon(that.currentPage,that.pageSize);
            }else if (resp.data.code===300){
              that.$message.error(resp.data.msg);
              that.initTableCoupon(that.currentPage,that.pageSize);
            }else {
              that.$message.error(resp.data.msg);
              that.initTableCoupon(that.currentPage,that.pageSize);
            }
          })
        }
      })
    },
    //删除会员优惠券
    deleteCoupon(id){
      var that=this;
      this.$confirm('确定删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/customer/coupon/deleteCoupon/${id}`).then(function (resp) {
          if (resp.data.code!=200){
            return that.$message.error("删除失败");
          }else {
            if (that.total%that.pageSize==1){
              that.currentPage--;
            }else {
              that.currentPage = that.currentPage;
            }
            that.$message.success("删除成功");
            that.initTableCoupon(that.currentPage,that.pageSize);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style scoped>

</style>